<template>
  <div id="Login">
      <template>
        <div id="Point">
          <!-- 顶部 -->
          <el-header id="xd" style="background-color:#f2f2f2; height:100px;">
              <!-- 根据参数切换请求的路由 -->
              <div style="padding-right: 20%;width:1400px;margin:auto;">
                  <p style="margin:0;font-size:26px; padding-top:20px;" id="biaoqian">用户登录</p>
                  <p style=""><a href="#/index/false/home">首页</a>
                  >登录
                  </p>
              </div>
          </el-header>
        </div>
      </template>







    <div id="left">
      <img width="450px" src="../../images/shop/login-png.png" alt="" />
    </div>

    <div id="regi">
      <el-form
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        id="from">
        <h4 style="float:left">登录</h4>
        <el-input type="text" v-model="user" :placeholder="user_plac" autocomplete="off"></el-input>
        <el-input type="password" v-model="pass" :placeholder="pass_plac" autocomplete="off"></el-input>
        <el-button type="primary" @click="sign()">登录</el-button>
        <p style="margin-top:10px">
            <a href="">忘记密码</a>&nbsp;&nbsp;&nbsp;
            <a href="#/index/false/register">注册新用户</a>
        </p> 
      </el-form>
    </div>
  </div>
</template>


<script>
import Point from '../point.vue';


export default {
  components: { Point },
  data() {
    return {
      current:'登录',
      user:'',
      pass:'',
      user_plac:'账号admin',
      pass_plac:'密码123456',
    };
  },
  methods:{
    sign() {
      let bool=true;
      if(this.user===''){
        this.user_plac='请输入手机号';
        bool = false;
        this.$message({
          message: '手机号不可为空',
          type: 'warning'
        });
        return;
      }
      if(this.pass===''){
        this.pass_plac='请输入密码';
        bool = false;
        this.$message({
          message: '密码不可为空',
          type: 'warning'
        });
      }
      if(bool){
        // 执行登录
        if(this.user==='admin' && this.pass==='123456'){
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.$router.push('/index/true');
        }else{
          // 提示
           this.$message.error('账号或密码错误');
        }
      }
    },


  },


};
</script>

<style>
#left,
#regi {
  display: inline-block;
  float: left;
}
#left {
  width: 50%;
  text-align: right;
}
#regi {
  width: 50%;
  /* margin-top:10px; */
}
#from{
    float:left;
    text-align: center;
}
#from .el-input,#from .el-button{
    width: 300px;
    margin-top: 20px;
    display:block;

}
</style>